<template>
  <div>
    <div class="background">
      <div class="register-form">
        <h2>注册</h2>
        <form action="/register" method="post" @submit.prevent="zhuce">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              type="text"
              id="username"
              name="username"
              required
              v-model="username"
              @blur="validateUsername"
              placeholder="用户名必须是1到6个汉字"
            />
            <span style="color: red; display: none" ref="hanzi"
              >用户名必须是1到6个汉字</span
            >
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input
              type="email"
              id="email"
              name="email"
              required
              v-model="email"
              @blur="validateEmail"
              placeholder="请输入正确的邮箱"
            />
            <span style="color: red; display: none" ref="eml"
              >邮箱格式不正确</span
            >
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input
              type="password"
              id="password"
              name="password"
              required
              v-model="password"
              @blur="validatePassword"
              placeholder="密码必须包含大小写字母和数字"
            />
            <span style="color: red; display: none" ref="pass"
              >密码必须包含大小写字母和数字</span
            >
          </div>
          <button type="submit" :plain="true">注册</button>
        </form>
        <br />
        <router-link to="/logo">已有账号？点此登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      username: "",
      email: "",
      password: "",
    };
  },
  methods: {
    // 验证用户名
    validateUsername() {
      const usernameRegex = /^[\u4e00-\u9fa5]{1,6}$/;
      if (!usernameRegex.test(this.username)) {
        this.$refs.hanzi.style.display = "block";
      } else {
        this.$refs.hanzi.style.display = "none";
      }
    },
    // 验证邮箱
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.$refs.eml.style.display = "block";
      } else {
        this.$refs.eml.style.display = "none";
      }
    },
    // 验证密码
    validatePassword() {
      const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
      if (!passwordRegex.test(this.password)) {
        this.$refs.pass.style.display = "block";
      } else {
        this.$refs.pass.style.display = "none";
      }
    },
    // 注册逻辑
    zhuce() {
      // 验证用户名
      this.validateUsername();
      if (!/^[\u4e00-\u9fa5]{1,6}$/.test(this.username)) {
        return; // 阻止提交
      }

      // 验证邮箱
      this.validateEmail();
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)) {
        return; // 阻止提交
      }

      // 验证密码
      this.validatePassword();
      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(this.password)) {
        return; // 阻止提交
      }

      // 如果所有验证通过，存储用户信息并跳转
      const userInfo = {
        username: this.username,
        email: this.email,
        password: this.password,
      };
      localStorage.setItem("userInfo", JSON.stringify(userInfo));
      this.$router.push("/logo");
    },
  },
};
</script>

<style lang="less" scoped>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.background {
  background-image: url("./bgimg.webp"); /* 替换为你的背景图路径 */
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-form {
  background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.register-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
